import CommonHelper from '../utils/common.helper'

export default class ShopeexManager {
  init(): void {
    let panel = jQuery(`<div id="shopeex-toolkit">
  <button class="btn btn-primary">导出订单excel</button>
  <input type="number" value='50'  />
</div>`)

    panel
      .css({
        position: 'fixed',
        'z-index': 1,
      })
      .prependTo(document.body)

    let button = panel.find('button')

    button.on('click', () => {
      let pageSize = $<HTMLInputElement>('#shopeex-toolkit > input').prop(
        'value'
      )
      this.downloadOrderList(parseInt(pageSize || 50, 10))
    })
  }

  downloadOrderList(pageSize = 50) {
    fetch(location.origin + '/api/order/unPackage/list', {
      method: 'post',
      headers: {
        token: localStorage.token,
        'Content-Type': 'application/json;charset=UTF-8',
        Accept: 'application/json, text/plain, */*',
      },
      credentials: 'same-origin',
      body: JSON.stringify({
        orderSn: '',
        shopId: 0,
        shopeeStatus: 'READY_TO_SHIP',
        trackingNumber: '',
        userId: 0,
        orderBy: 4,
        pageNumber: 1,
        pageSize,
      }),
    })
      .then((resp) => resp.json())
      .then((resp) => resp.data.list)
      .then((resp) =>
        resp
          .map((order: ShopeeXOrderModel) => {
            return `
  <tr>
      <td data-desc="订单编号">${order.ordersn}</td>
      <td data-desc="运单编号">${order.trackingNo}</td>
      <td data-desc="收件人">${order.name}</td>
      <td data-desc="收货地邮编">${order.zipcode}</td>
      <td data-desc="收件人电话">${order.phone}</td>
      <td data-desc="收件省份">${order.state}</td>
      <td data-desc="收件城市">${order.city}</td>
      <td data-desc="收件地区">${order.district}</td>
      <td data-desc="收件详细地址">${order.fullAddress}</td>
      <td data-desc="重量KG"></td>
      <td data-desc="体积"></td>
      <td data-desc="代收货款"></td>
      <td data-desc="货物类型">普货</td>
      <td data-desc="备注"></td>
      <td data-desc="中文品名">玩具</td>
      <td data-desc="英文品名">toys</td>
      <td data-desc="件数">${order.orderItems.reduce(
        (result, item) => result + item.variationQuantityPurchased,
        0
      )}</td>
      <td data-desc="申报价值">${order.totalAmount}</td>
      <td data-desc="申报价值币别">${
        order.currency === 'MYR' ? 'RM' : order.currency
      }</td>
      <td data-desc="物品分类1"></td>
      <td data-desc="物品分类2"></td>
      <td data-desc="物品分类3"></td>
      <td data-desc="商品备注"></td>
      <td data-desc="购买类型"></td>
      <td data-desc="URL">https://shopee.com.my/product/${order.shopid}/${
              order.orderItems[0].itemId
            }</td>
      <td data-desc="出口商品类型"></td>
      <td data-desc="商品规格"></td>
  </tr>
          `
          })
          .join('')
      )
      .then(
        (orderListTemplate) => `<table>
      <thead>
            <tr>
            <th>订单编号</th>
            <th>运单编号</th>
            <th>收件人</th>
            <th>收货地邮编</th>
            <th>收件人电话</th>
            <th>收件省份</th>
            <th>收件城市</th>
            <th>收件地区</th>
            <th>收件详细地址</th>
            <th>重量KG</th>
            <th>体积</th>
            <th>代收货款</th>
            <th>货物类型</th>
            <th>备注</th>
            <th>中文品名</th>
            <th>英文品名</th>
            <th>件数</th>
            <th>申报价值</th>
            <th>申报价值币别</th>
            <th>物品分类1</th>
            <th>物品分类2</th>
            <th>物品分类3</th>
            <th>商品备注</th>
            <th>购买类型</th>
            <th>URL</th>
            <th>出口商品类型</th>
            <th>商品规格</th>
            </tr>
      </thead>
      <tbody>${orderListTemplate}</tbody>
  </table>
  `
      )
      .then((content) => {
        console.log(content)
        let dateString = new Date().toLocaleDateString().replace(/\//g, '_')
        CommonHelper.saveFile(
          `order-list_${dateString}.xls`,
          content
          //   'application/vnd.ms-excel'
        )
      })
    //downloadFile(renderProductContent(productInfo), productInfo.title + '.html')
  }
}
